@import './variable.scss';

::v-deep .sms-dialog {
  width: 45%;
  height: 60%;
  background-color: #1a4969;
  font-size: px(14);

  .default-divider {
    background-color: rgba(#dcdfe6, 0.8);
    margin: 0;
  }

  .el-dialog__header {
    padding: px(20);
    text-align: center;
    .el-icon-close,
    .el-dialog__title {
      color: #fff;
      font-size: px(20);
      line-height: px(24);
      height: px(24);
    }
  }
  .el-dialog__body {
    padding: px(10) px(20);
    height: calc(100% - #{px(64)});
  
    .el-form {
      height: 40%;
      .el-form-item__error{
        font-size: px(12);
        line-height: px(20);
        padding: 0;
      }
      .el-form-item {
        margin-bottom: px(22);
        margin-right: px(10);
        height: 100%;
        &__content {
          color: #fff;
          line-height: px(34);
          display: flex;
          flex-direction: column;
          height: 100%;
        }
        &__label {
          color: #fff;
          line-height: px(32);
          font-size: px(18);
          color: #fff;
        }
        .el-select{
          max-height: 100%;
          overflow-y: auto;
        }
        .el-select__tags {
          width: 100%;
          max-width: 100% !important;
          padding: px(3) 0;
          transform: none;
          top: 0;
        }

        .el-select .el-input__inner{
          background-color: #1a4969;
          border: 1px solid rgba(gray, 0.8);
          color: #fff;
          width: 100%;
        }
        .el-select .el-input,.el-select__tags-text{
          font-size: px(16);
        }
        .el-select .el-input__icon{
          line-height: px(32)
        }
        .el-input__suffix{
          display: none;
        }

      }
    }

    .sms-footer{
      height: 60%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .sms-file{
      display: flex;
      align-items: center;
      margin-bottom: px(10);
      .title{
        font-size: px(18);
        margin-left: px(10);
        color: #fff;
      }
    }

    .sms-upload{
      .el-upload--text{
        display: none;
      }
      .el-upload-list__item{
        margin-top: 0;
        &:hover{
          background-color: #fff;
          .el-upload-list__item-name{
            color: #1a4969;
          }
        }
      }
      .el-upload-list__item-name{
        color: #fff;
        font-size: px(18);
      }
    }

    .sms-send{
      width: 100%;
      display: flex;
      align-items: center;
      color: #fff;
      margin-bottom: px(20);
      img{
        background-color: #fff;
        width: px(50);
        height: px(50);
        border-radius: 50%;
        cursor: pointer;
        &:hover{
          background-color: #59abfd;
        }
      }
      .el-textarea{
        margin: 0 px(20);
      }
      .el-textarea__inner {
        font-size: px(18);
        background-color: #1a4969;
        border: 1px solid rgba(gray, 0.8);
        color: #fff;
      }
    }
    
  }

  
  .el-dialog__footer {
    padding: 0 px(30) px(10);
    .el-button {
      background-color: #1a4969;
      color: #fff;
      height: px(32);
      width: px(70);
      font-size: px(14);
      border-radius: px(5);
      padding: 0;
      &:hover {
        background-color: #409eff;
      }
    }
  }

  ::-webkit-scrollbar{
    width: px(10);
  }
  /* 垂直滚动条的滑动块 */
  ::-webkit-scrollbar-thumb:vertical {
    border-radius: px(4);
    background-color:#1a4969;
    opacity: 1;
  }
   
  ::-webkit-scrollbar-track {
      border: 1px #d3d3d3 solid;
      box-shadow: 0 0 px(3) #dfdfdf inset;
      border-radius: px(10);
      background: #eee;
  }
  ::-webkit-scrollbar-thumb {
      border: 1px #808080 solid;
      border-radius: px(10);
      background: #999;
  }
 
}